<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 400px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="box" id="app">
      <h2>远强学习网</h2>
      姓名：<input type="text"  v-model="username"/> <br /><br />
      是否单身<input type="checkbox" name="" id="" v-model="isSingle"/>
            <br></br>
      性别：<label for="male">男:</label>
            <input type="radio" name="gender" id="male" v-model="gender" value="1">
            <label for="famale">女:</label>
            <input type="radio" name="gender" id="famale" v-model="gender" value="2">
            <br><br>
            <label for="city">所在城市: </label>
            <select name="" id="city" v-model="cityId">
                  <option value="100">北京</option>
                  <option value="101">上海</option>
                  <option value="110">广州</option>
                  <option value="111">深圳</option>
                </select>
                <br><br>
            <label for=""> 自我描述：</label>
            <br>
            <textarea name="" id="" cols="30px" rows="5px"></textarea>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app =new Vue({
          el:'#app',
          data:{
            username:'',
            isSingle:0,
            gender:2,
            cityId:111
          }
        })
    </script>
  </body>
</html>
